<template>
<view class="test">
  <view class="video-group">
    <view class="video-item" v-for="(item, key) in videoList" :key="key">
      <video class="liveVideo"
             :src="item.url"
             :show-play-btn="false"
             autoplay loop controls binderror="videoErrorCallback"></video>
    </view>
  </view>

</view >
</template>

<script>
const videoList = [
  { name: '安徽卫视', url: 'https://web1.ps2zhx.pudong-edu.sh.cn/live/cameraid/1000012%242/substream/1.m3u8' },
  { name: '经济生活', url: 'https://web1.ps2zhx.pudong-edu.sh.cn/live/cameraid/1000012%242/substream/1.m3u8' },
  { name: '影视频道', url: 'https://web1.ps2zhx.pudong-edu.sh.cn/live/cameraid/1000012%242/substream/1.m3u8' },
  { name: '公共频道', url: 'https://web1.ps2zhx.pudong-edu.sh.cn/live/cameraid/1000012%242/substream/1.m3u8' }
  // { name: '综艺频道', url: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8' },
  // { name: '科教频道', url: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8' },
  // { name: '人物频道', url: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8' },
  // { name: '国际频道', url: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8' }
]
export default {
  name: 'index',
  title: '测试组件',
  data () {
    return {
      videoList: videoList
    }
  },
  onShow () {},
  onLoad(){},
  methods: {
    videoErrorCallback(e) {
      console.log('视频错误信息:')
      console.log(e.detail.errMsg)
    }
  }
}
</script>

<style scoped>
.test{
  width: 100%;
}
.video-group{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.video-item{
  width: 48%;
  height: 230rpx;
  margin: 10rpx 0 0 0;
}
.video-item .liveVideo{max-width: 100%; max-height: 100%;}
</style>
